<template>
  <div class="dibu">
    <el-row>
      <el-col :xs="1" :sm="1" :md="4" :lg="6" :xl="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :xs="22" :sm="22" :md="16" :lg="12" :xl="12">
        <div class="grid-content bg-purple-light">
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple"><el-row>
      <el-col :span="24" >
        <div class="grid-content bg-purple">
          <div class="title">
            <p>被以下专题收入，发现更多相似内容</p>
          </div>
          <div class="zhuanti">
            <el-button type="text" @click="open" style="color:black;">
              <i class="el-icon-plus" style="color:#DCDCDC;font-weight:bold;"></i>
              收入我的专题
            </el-button>
          </div>
          <div class="note">
            <a class="cover" href>
              <img src="../../assets/ContNavimg/2.jpg" alt>
            </a>
            <a href>很火的Java题——判断一个整数是否是奇数</a>
            <p class="description">
              背景
              我们开发一般的企业级Web应用，其实从本质上来说，都是对数据的增删查改进
              行各个维度的包装。所以说，不管你的程序如何开发，基本上，都离不开数据
              本身。那么，在开发企业级应用的过程中，很多同学一定遇到过这样的困惑，当
              完成了应用程序的基本增删查改功能之后，用户会经常吐
            </p>
            <a class="author" href>
              <div class="avater">
                <img src="../../assets/ContNavimg/1.jpg" alt>
                <span>千峰IT</span>
              </div>
            </a>
            <el-divider></el-divider>
          </div>
          <div class="note">
            <!-- <a class="cover" href="">
                  <img src="..\assets\2.jpg" alt="">
            </a>-->
            <a href>MarkDown</a>
            <p class="description">
              1.1 什么是 MyBatis ？
              MyBatis 是支持定制化 SQL、存储过程以及高级映射的优秀的持久层框架。MyBatis
              避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以对配置
              和原生Map使用简单的 XML 或
            </p>
            <a class="author" href>
              <div class="avater">
                <img src="../../assets/ContNavimg/3.jpg" alt>
                <span>片刻_ApacheCN</span>
              </div>
            </a>
            <el-divider></el-divider>
          </div>
          <div class="note">
            <!-- <a class="cover" href>
              <img src="..\assets\2.jpg" alt>
            </a> -->
            <a href>2019年安徽教师招聘考试教综考点汇总（二）</a>
            <p class="description">
              第二章德育的原则、途径与方法
              【考点1】德育的原则
              德育原则是根据教育目的、德育目标和德育过程规律提出的，学校和教师进行德育工作必须遵循的基本要求
              。我国德育的主要原则包括：社会主义方向性原则；从学生实际出发原则；知行统一原则；集体教育和个别
            </p>
            <a class="author" href>
              <div class="avater">
                <img src="../../assets/ContNavimg/4.jpg" alt>
                <span>有_味</span>
              </div>
            </a>
            <el-divider></el-divider>
          </div>
          <div class="note">
            <a class="cover" href>
              <img  src="../../assets/ContNavimg/7.jpg" alt>
            </a>
            <a href>诗集/冰糖葫芦——翟高泉</a>
            <p class="description">
              马路对面的冰糖葫芦，
              排起长队，
              小女孩催促父亲去买，
              等了四十年，
              冰糖葫芦都干瘪了，
              孩子问她，
              爷爷去哪了，
              没有回答。
            </p>
            <a class="author" href>
              <div class="avater">
                <img src="../../assets/ContNavimg/1.jpg" alt>
                <span>千峰IT</span>
              </div>
            </a>
            <el-divider></el-divider>
          </div>
          <div class="note">
            <!-- <a class="cover" href>
              <img src="..\assets\2.jpg" alt>
            </a> -->
            <a href>选择</a>
            <p
              class="description"
            >选择 世上有两种选择， 一个是放开，另一个是不舍， 当爱情来临时， 不可以放开就让其凋
            落。 谁说凋落就是毁灭？ 面对真实残酷的生活， 我们的选择无对与错。 历经心灵千万次苦苦
            思索， 我依然执着， 只是不再</p>
            <a class="author" href>
              <div class="avater">
                <img src="../../assets/ContNavimg/5.jpg" alt>
                <span>翟高泉</span>
              </div>
            </a>
            <el-divider></el-divider>
          </div>
          <div class="note">
            <!-- <a class="cover" href>
              <img src="..\assets\2.jpg" alt>
            </a> -->
            <a href>Apache Spark 2.2.0 中文文档 - Spark SQL, DataFrames and Datasets Guide | ApacheCN</a>
            <p
              class="description"
            >Spark SQL, DataFrames and Datasets Guide Overview SQL Datasets and DataFrames 开始
            入门 起始点: SparkSession 创建 DataFrames 无类型的Dataset操作 (aka Dat...</p>
            <a class="author" href>
              <div class="avater">
                <img src="../../assets/ContNavimg/6.jpg" alt>
                <span>星愿O</span>
              </div>
            </a>
            <el-divider></el-divider>
          </div>
          <div class="note">
            <!-- <a class="cover" href>
              <img src="..\assets\2.jpg" alt>
            </a> -->
            <a href>MyBatis</a>
            <p
              class="description"
            >MyBatis 理论篇 [TOC] 什么是MyBatis MyBatis是支持普通SQL查询,存储过程和高级映射的优秀
            持久层框架.MyBitis消除了几乎所有的JDBC代码和参数的手工设置及对结果的检索.MyBatis可以使用
            简单的XML或注解用于配置和原始映射,将接口和...</p>
            <a class="author" href>
              <div class="avater">
                <img src="../../assets/ContNavimg/1.jpg" alt>
                <span>千峰IT</span>
              </div>
            </a>
          </div>
        </div>
      </el-col>
    </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :xs="1" :sm="1" :md="4" :lg="6" :xl="6">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>
    
  </div>
</template>
<script>
export default {
  methods: {
    open() {
      this.$alert("你还没有创建专题，去新建一个", "收入到我管理的专题", {
        // confirmButtonText: "确定",
        // callback: action => {
        //   this.$message({
        //     type: "info",
        //     message: `action: ${action}`
        //   });
        // }
      });
    }
  }
};
</script>
<style scoped>
.dibu {
  height: auto;
  padding-bottom: 50px;
  background: #f5f5f5;
}
/* .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  } */
.el-col {
  border-radius: 4px;
}
/* .bg-purple-dark {
  background: #99a9bf;
} */
/* .bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
} */
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.dibu {
  margin-top: 70px;
}
.title {
  margin-top: 35px;
  border-left: 3px solid #ea6f5a;
}
.title p {
  padding-left: 10px;
}
.zhuanti {
  border-radius: 4px;
  width: 25%;
  border: 1px solid #dcdcdc;
}
.note {
  margin-top: 25px;
}
.note a{
  display: block;
  margin: 5px 0 20px 0;
  font-size: 18px;
  color: #333333;
  font-weight: bold;
  text-decoration: none;
}

.cover img {
  height: 120px;
  width: 150px;
  float: right;
}
.description {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 23px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.author {
  height: 24px;
}
.author span {
  font-weight: normal;
  font-size: 13px;
  color: #333333;
  margin-left: 10px;
}

.avater img {
  margin-top: 5px;
  height: 26px;
  width: 26px;
  border-radius: 500px;
  border: 1px solid #dcdcdc;
}
</style>